<!-- HorizontalList.vue -->
<template>
  <el-card class="horizontal-list-wrapper" shadow="never">
    <div class="horizontal-list">
      <div class="list-item">
        <div class="color-block" style="background-color: #5470c6"></div>
        <span class="item-text">总量: {{ props.diskAllInfo.size }}</span>
      </div>
      <div class="list-item">
        <div class="color-block" style="background-color: #fac858"></div>
        <span class="item-text">已用: {{ props.diskAllInfo.used }}</span>
      </div>
      <div class="list-item">
        <div class="color-block" style="background-color: #67c23a"></div>
        <span class="item-text">可用: {{ props.diskAllInfo.avail }}</span>
      </div>
      <div class="list-item">
        <div class="color-block" :style="{ backgroundColor: isOverLimit ? '#ee6666' : '#91cc75' }"></div>
        <span class="item-text">使用率: {{ props.diskAllInfo.usePer }}%</span>
      </div>
      <div class="list-item">
        <button v-if="isOverLimit" class="cleanup-button" title="清理" @click="emitCleanup">!</button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ElCard } from 'element-plus';
import type { DiskAllInfo } from '../types/index';
const props = defineProps<{
  diskAllInfo: DiskAllInfo;
  limitPercent: number;
}>();
const isOverLimit = computed(() => {
  return props.diskAllInfo.usePer > props.limitPercent;
});

// 2. 【新增】定义 emits
// 'cleanup' 事件会向父组件传递 diskName
const emit = defineEmits(['cleanup']);

// 3. 【新增】触发 emit 的函数
const emitCleanup = () => {
  // 阻止事件冒泡 (如果按钮在链接或其它可点击元素内)
  // event.stopPropagation();
  emit('cleanup');
};
</script>

<style scoped>
.horizontal-list-wrapper {
  background-color: #f5f7fa;
  border: none;
}

.horizontal-list {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 24px;
}

.list-item {
  display: flex;

  align-items: center;
  gap: 8px;
}

.color-block {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.item-text {
  font-size: 14px;
  color: #606266;
}

/* 2.2 【新增】清理按钮样式 */
.cleanup-button {
  flex-shrink: 0; /* 防止按钮被压缩 */

  /* 模仿 Element Plus 警告按钮的圆形图标样式 */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fde2e2; /* Element Plus warning-light-8 */
  background-color: #fef0f0; /* Element Plus warning-light-9 */
  color: #f56c6c; /* Element Plus danger color */

  font-size: 14px;
  font-weight: bold;
  line-height: 1; /* 重置行高 */

  /* 使用 flex 居中 "!" */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  cursor: pointer;
  transition: all 0.3s ease;
}

.cleanup-button:hover {
  background-color: #f56c6c;
  color: #ffffff;
  border-color: #f56c6c;
}
</style>
